<template>
  <div class="page-container page-footer-btn">
      <van-row>
        <van-col span="24">
          <FortenScan
            ref="scanDom"
            propPlaceholder="请扫描标签拣货/取消拣货"
            propErrorMsg="请扫描正确的SN/RFID"
            :propTypeArr="['sn','rfid']"
            @scanCall="handleScanOver"
            :disabled="strings.isBlank(dist.id)"
          />
        </van-col>
      </van-row>
      <br>
      <van-row>
        <van-cell
          >
          <template #title>
            <div style="font-size: 10px">
              <van-row>
                <van-col span="24" style="padding-left: 0px">
                  <van-field v-if="strings.isBlank(dist.id)" :disabled="strings.isNotBlank(dist.id)" is-link @click="showPopup" placeholder="请选择科室:" label="收货科室" :value="dist.deptName"></van-field>
                  <div v-else>收货科室:{{dist.deptName}}</div>
                </van-col>
              </van-row>
              <van-row>
                <van-col span="15">配送单号:{{dist.busKey}}</van-col>
                <van-col span="9">配送金额:{{dist.amount}}</van-col>
              </van-row>
              <van-row>
                <van-col span="15">拣货时间:{{dist.pickDate}}</van-col>
                <van-col span="9">拣货人:{{dist.picker}}</van-col>
              </van-row>
              <van-row>
                <van-col span="24">科室地址:{{dist.deptAddressName}}</van-col>
              </van-row>
            </div>
          </template>
        </van-cell>
      </van-row>
      <br>
      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >
        拣货明细
      </van-divider>
      <van-row>
        <van-cell-group >
          <van-cell
            style="border-top:0.5px solid  #ccc;"
            v-for="(item, index) in items"
            :key="index"
            currency=""
          >
          <template #title>
            <van-row>
              <van-col span="24" >
                <van-row>
                  <van-col span="16 ">{{item.matrName}}</van-col>
                  <van-col span="8">{{item.recommendLot}}</van-col>
                </van-row>
                <van-row>
                  <van-col span="12" style="font-size: 10px" >{{item.matrSpec}}</van-col>
                  <van-col span="6"  style="font-size: 10px">{{item.locationNameDist ? item.locationNameDist : dist.warehouseName}}</van-col>
                  <van-col span="6" style="height: 20px;text-align: center;margin-top: 15px;">
                    <van-icon name="goods-collect" color="#1989fa" /><span style="font-size: 15px;margin-left: 3px;color: #1989fa">已拣:{{item.pickPackageQty}}{{item.packageUnit}}</span>
                  </van-col>
                </van-row>

                <van-row>
                  <van-col span="16">{{item.applyDate}}</van-col>
                  <van-col span="8">{{item.applyUser}}</van-col>
                </van-row>
              </van-col>
            </van-row>
          </template>
        </van-cell>
        </van-cell-group>
      </van-row>
      <van-row type="flex" justify="space-around" class="footer-btn">
        <van-col span="5">
          <van-button type="primary" @click="handleBegin" block :disabled="['picking', 'picked'].includes(dist.flowStatus)">
            开始拣货
          </van-button>
        </van-col>
        <van-col span="5">
          <van-button type="primary" @click="handleEndPick" block :disabled="dist.flowStatus != 'picking'">
            拣货完成
          </van-button>
        </van-col>
        <van-col span="5">
          <van-button type="danger" @click="handleCancelPick" block :disabled="dist.flowStatus != 'picked'">
            拣货撤销
          </van-button>
        </van-col>
        <van-col span="5">
          <van-button type="info" block @click="utilPrint.print('dist',dist.id )" :disabled="strings.isBlank(dist.id)">
            打印标签
          </van-button>
        </van-col>
      </van-row>

    <!-- 选择科室-->
    <FortenList ref="listItem" :propAutoFetchData = 'false'
                :propIsRadio="true"
                :propFlagPopup="true"
                :propSearchFields="['name']"
                :propSearchTextAppend="'名字'"
                :propPreQueryWrapper="$newWrapper().eq('flag_bus', true)"
                propUrl="/base/dept/pageBusDept"
                @change="deptCheck"
    >
      <template  #default="{item}"  >
        <van-row >
          <van-col span="4">
            <van-radio   :name="item"  />
          </van-col>
          <van-col span="4">名字：</van-col>
          <van-col span="16">{{item.name}}</van-col>
        </van-row>
        <van-row >
          <van-col span="4">
          </van-col>
          <van-col span="4">仓库：</van-col>
          <van-col span="16">{{item.warehouseName}}</van-col>
        </van-row>
      </template>
    </FortenList>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import barcodeParse from '@/util/barcodeParse.js'

export default {
  name: 'detail',
  data() {
    return {
      scan: '',
      dist: {},
      items: []
    }
  },
  mounted() {
    this.showPopup()
  },
  methods: {
    //扫描
    handleScanOver(scanValue) {
      this.$ajax.post('/wm/dist/pick', {
        isScan: 1,
        distId: this.dist.id,
        uniqueCode: scanValue,
        warehouseId: this.dist.warehouseId
      }).then(resp => {
        if (resp.code == 0) {
          this.$notify.success(resp.msg)
          this.getData()
          this.scan = ''
          this.$refs.scanDom.focus()
        }
      })
    },

    // 加载配送单
    getDist() {
      this.$ajax.get('/wm/dist/findByIdForPDA?id=' + this.dist.id).then(response => {
        if (response.code == 0) {
          this.dist = response.data
          this.getData()
        }
      })
    },

    // 加载配送明细
    getData() {
      let wrapper = this.$newWrapper().eq('dist_id', this.dist.id)
      this.$ajax.get('/wm/dist_item/findDistItemPda', {
        params: {
          queryString: JSON.stringify(wrapper.queryConditions)
        }
      }).then(response => {
        if (response.code == 0) {
          this.items = response.data
        }
      })
    },

    returnDist() {
      this.$router.push({path: '/dist/dist-pick'})
    },
    handleEndPick() {
      Dialog.confirm({
        title: '提示',
        message: '是否完成拣货',
      })
        .then(() => {
          this.$ajax.post(`/wm/dist_item/endPick?distId=${this.dist.id}`).then(resp => {
            if (resp.code == 0) {
              this.$notify.success(resp.msg)
              this.$set(this.dist, 'flowStatus', 'picked')
            }
          })
        })
        .catch(() => {
        })
    },

    //开始拣货-创建配送单
    handleBegin() {
      this.utils.loadShow()

      this.$set(this.dist, 'flowStatus', 'picking')
      this.$set(this.dist, 'busDate', new Date().format(this.dates.defaultDatePattern))
      this.$set(this.dist, 'busUser', this.utils.getCurrentUser().name)
      this.$set(this.dist, 'pickDate', new Date().format(this.dates.defaultDateTimePattern))
      this.$set(this.dist, 'picker', this.utils.getCurrentUser().name)
      this.$set(this.dist, 'warehouseId', this.utils.getCurrentWarehouse().warehouseId)
      this.$set(this.dist, 'warehouseName', this.utils.getCurrentWarehouse().warehouseName)
      if (this.strings.isBlank(this.dist.warehouseId)) {
        this.$notify.warning('请先到工作台选好工位再进行操作')
        return
      }
      if (this.strings.isBlank(this.dist.deptId)) {
        this.$notify.warning('请先选择收货科室')
        this.showPopup()
        return
      }

      this.$ajax.post('/wm/dist/save', this.dist).then(resp => {
        if (resp.code == 0) {
          this.$notify.success('单据创建成功，请开始拣货')
          this.dist = resp.data
          setTimeout(() => {
            this.$refs.scanDom.focus()
          }, 500)
        }
        this.utils.loadHide()
      })
    },
    showPopup() {
      this.$refs.listItem.show()
    },
    handleCancelPick() {
      Dialog.confirm({
        title: '提示',
        message: '是否撤销拣货',
      })
        .then(() => {
          this.$ajax.post(`/wm/dist_item/cancelPick?distId=${this.dist.id}`).then(resp => {
            if (resp.code == 0) {
              this.$notify.success(resp.msg)
              this.$set(this.dist, 'flowStatus', 'picking')
              this.getData()
            }
          })
        })
        .catch(() => {
        })
    },

    deptCheck(item) {
      this.$set(this.dist, 'deptId', item.id)
      this.$set(this.dist, 'deptName', item.name)
    }
  },
}
</script>

<style lang="scss" scoped>

</style>
